<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>员工列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <style type="text/css">
        .layui-table-cell{height:40px;line-height:40px;}
    </style>
</head>
<body>
<!--搜索框-->
<blockquote class="layui-elem-quote quoteBox mod_default_box">
    <form class="layui-form"style="text-align: center">
        <div class="layui-inline">
            <label class="layui-form-label">关键字</label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" placeholder="请输入关键字" autocomplete="off" class="layui-input" />
            </div>
            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search-qiye-submit">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">车辆类型</label>
            <div class="layui-input-inline">
                <select name="carType" lay-verify="" lay-filter="carType" id="carType" lay-search>
                    <option value="">选择车辆类型</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label" >车辆归属</label>
            <div class="layui-input-inline">
                <select name="carGs" lay-verify="" lay-filter="carGs" id="carGs" lay-search>
                    <option value="">选择车辆归属</option>
                    <option value="0">企业</option>
                    <option value="1">个人</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label" >是否已打印</label>
            <div class="layui-input-inline">
                <select name="city" lay-verify="" lay-filter="zkFlag" id="zkFlag" lay-search>
                    <option value="">请选择</option>
                    <option value="0" selected>否</option>
                    <option value="1">是</option>
                </select>
            </div>
        </div>
    </form>
</blockquote>
<!--数据列表-->
<table class="layui-hide" id="test" lay-filter="qiye-table"></table>

<script type="text/html" id="qiye-toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="zm" >打印通行证</a>
    {{# if( d.cl_zk_flag==1) { }}
    <a class="layui-btn layui-btn-xs" lay-event="cancelDy" style="width:80px;">取消打印</a>
    {{# } else{ }}
    <a class="layui-btn layui-btn-xs" lay-event="dy" style="width:80px;">打印</a>
    {{# } }}
</script>

<script type="text/html" id="toolbarDemo">
     <div style="display:flex;">
        <a class="layui-btn layui-btn-sm" lay-event="plzm">批量打印通行证</a>
    </div>
</script>

<script src="/js/layui/layui.js"></script>
<script src="/js/layui/layui.all.js"></script>
<script src="/admin/js/token.js"></script>
<script>
    layui.use(['table'], function() {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var name, carType, carGs, zkFlag;
        table.render({
            elem: '#test'
            , id: 'staff-table-id'//重载需要
            , url: '/cheliang/selectcheliang'
            , title: '员工表'
            ,toolbar: '#toolbarDemo'
            , cols: [[
                {type: 'checkbox'}
                ,{type: 'numbers'}
                , {field: 'carType',align : 'center', title: '车辆类型', width:140}
                , {field: 'cl_pinpai',align : 'center', title: '车辆品牌', width:140}
                , {field: 'cl_paizhao', width: 110, align: 'center', title: '车辆牌照'}
                , {field: 'cl_guishuren_name',align : 'center',title: '车辆所有人' , width:160}
                ,{field:'cl_guishu_status',width : 110,align : 'center', title: '车辆归属',templet: function (d) {
                        if (d.cl_guishu_status==0) return "企业";
                        else if (d.cl_guishu_status==1) return "个人";
                    }
                }
                ,{field:'cl_zk_flag',width : 110,align : 'center', title: '是否已打印',templet: function (d) {
                        if (d.cl_zk_flag==0) return "否";
                        else if (d.cl_zk_flag==1) return "是";
                    }
                }
                , {field: 'cl_qianzhao',align : 'center', width:140,title: '前照',templet: '<div><img src="/upload/{{ d.cl_qianzhao }}" style="width: 70px;height: 50px;" onclick="previewImgs(this)"></div>'}
                // , {field: 'cl_houzhao',align : 'center', width:140,title: '后照',templet: '<div><img src="/upload/{{ d.cl_houzhao }}" style="width: 70px;height: 50px;" onclick="previewImgs(this)"></div>'}
                // , {field: 'cl_zuozhao',align : 'center', width:140,title: '左照',templet: '<div><img src="/upload/{{ d.cl_zuozhao }}" style="width: 70px;height: 50px;" onclick="previewImgs(this)"></div>'}
                // , {field: 'cl_youzhao',align : 'center', width:140,title: '右照',templet: '<div><img src="/upload/{{ d.cl_youzhao }}" style="width: 70px;height: 50px;" onclick="previewImgs(this)"></div>'}
                , {field: 'cl_fadongji_hao',align : 'center',title: '发动机号' , width:140}
                , {field: 'cl_hezairen_num',align : 'center',title: '核载人数', width:140}
                , {field: 'cl_zong_zhiliang',align : 'center', title: '总质量', width:180}
                , {field: 'cl_zhengbei_zhiliang',align : 'center', title: '整备质量', width:180}
                , {field: 'cl_hezai_zhiliang',align : 'center', title: '核载质量', width:180}
                , {field: 'cl_waikuang_size',align : 'center', width:110, title: '外框尺寸'}
                , {field: 'cl_zhunqianyin_zhiliang',align : 'center', width:110, title: '准牵引总质量'}

                , {toolbar: "#qiye-toolbar",align : 'center', width: 220, title: "操作" , fixed:"right"}
            ]]
            , page: true
            ,page: {
                curr: layui.data("gp_staff_page").index
            },
            done: (res, curr, count) => {
                layui.data("gp_staff_page", {
                    key: 'index',
                    value: curr
                });
            }
        });


        //搜索操作
        form.on('submit(search-qiye-submit)', function (data) {
            name = data.field.name;
            table.reload('staff-table-id', {
                where: {"name": name , "carType": carType , "carGs":carGs, "zkFlag":zkFlag}
                , page: {
                    curr: 1
                }
            });
            return false;
        });

        form.on('select(carType)', function(data){
            carType = data.value;
            name = $("#name").val();
            table.reload('staff-table-id', {
                where: {"name": name , "carType": carType , "carGs":carGs, "zkFlag":zkFlag}
                , page: {
                    curr: 1
                }
            });
        });

        $.ajax({
            url: "/cheliang/selectallcheliang_leixin",
            success: function (data) {
                if(data.code==0){
                    $.each(data.data, function (index, item) {
                        $("select[name = 'carType']").append(new Option(item.cl_leixin_name, item.id));
                    });
                    form.render();
                }
            }
        });

        form.on('select(carGs)', function(data){
            carGs = data.value;
            name = $("#name").val();
            table.reload('staff-table-id', {
                where: {"name": name , "carType": carType , "carGs":carGs, "zkFlag":zkFlag}
                , page: {
                    curr: 1
                }
            });
        });

        form.on('select(zkFlag)', function(data){
            zkFlag = data.value;
            name = $("#name").val();
            table.reload('staff-table-id', {
                where: {"name": name , "carType": carType , "carGs":carGs, "zkFlag":zkFlag}
                , page: {
                    curr: 1
                }
            });
        });


        table.on("toolbar(qiye-table)" , function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data;
            var ids = []
            switch(obj.event){
                case 'plzm':
                    if(data.length == 0) {
                        layer.msg("没有选中的记录")
                        return
                    }
                    for(var i in data) {
                        ids.push(data[i].id)
                    }

                    $.ajax({
                        url:"/cheliang/checkCar?ids="+ids ,
                        async:false ,
                        success:function(res) {
                            if(res.code == 200) {
                                location.href = "/admin/gongpai/batch_gongpai_detail.html?ids="+ids.join(",")+"&type=0&page=1"
                            }else if (res.code == 500){
                                layer.alert(res.msg, {
                                    icon: 2,
                                    skin: 'layer-ext-demo'
                                })
                            }else {
                                layer.msg("拒绝访问");
                            }
                        }
                    })
                    break;
            };
        })
        //表操作  监听操作
        table.on('tool(qiye-table)', function (obj) {
            var data=obj.data;
            var event = obj.event;
            if(event == "zm") {
                $.ajax({
                    url:"/cheliang/checkCar?ids="+ data.id,
                    async:false ,
                    success:function(res) {
                        if(res.code == 200) {
                            location.href = "/admin/gongpai/gongpai_detail.html?ids="+data.id+"&type=0&page=1"

                        }else if (res.code == 500){
                            layer.alert(res.msg, {
                                icon: 2,
                                skin: 'layer-ext-demo'
                            })
                        }else {
                            layer.msg("拒绝访问");
                        }
                    }
                })
            } else if (event == "dy") {
                layer.confirm('是否确认车辆已打印？', function (index) {
                    if (data.zkFlag == null || data.zkFlag == "") {
                        data.zkFlag = 0;
                    }
                    $.ajax({
                        url: "/cheliang/updateZkFlag?id=" + data.id + "&zkFlag=" + data.cl_zk_flag
                        , type: "GET"
                        , success: function (data) {
                            if (data.code == 200) {
                                layer.msg("标识成功");
                                table.reload("staff-table-id");
                            } else {
                                layer.msg("标识失败");
                            }
                        }
                        , error: function () {
                            console.log("ajax error");
                        }
                    });
                    layer.close(index);
                })
            }else if (event == "cancelDy") {
                layer.confirm('是否取消打印？', function (index) {
                    $.ajax({
                        url: "/cheliang/updateZkFlag?id=" + data.id + "&zkFlag=" + data.cl_zk_flag
                        , type: "GET"
                        , success: function (data) {
                            if (data.code == 200) {
                                layer.msg("标识成功");
                                table.reload("staff-table-id");
                            } else {
                                layer.msg("标识失败");
                            }
                        }
                        , error: function () {
                            console.log("ajax error");
                        }
                    });
                    layer.close(index);
                })
            }
        });
    });
</script>

<script>
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='800px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [800 + 'px', 550 + 'px'],  // area: [width + 'px',height+'px']  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }


</script>
</body>
</html>